<template>
	<view class="wrapper">
		<head-title showLeftButton="true" titleText="资料编辑"></head-title>
		<view v-if="mask" class="mask">
			<view class="selectCont">
				<image @tap="offmask" class="delIcon" src="../../static/image/delIcon.png" mode="aspectFill"></image>
				<view v-for="(item,index) in selectList" @tap="select(item)" hover-class="bindhover" :key="index" class="select">{{item}}</view>
			</view>
		</view>
		<form v-if="msg!=''" @submit="bindSubmit" class="cont" hover-class="bindhover">
			<view @tap="bindwall" class="list flex_row">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj12.png"></image></view>
					<text>主页背景墙</text>
				</view>
				<view class="right flex_row">
					<view class="text color_gray">去更换</view>
					<view class="right_icon flex_col">
						<image src="../../static/image/right_icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view @tap="bindPhoto" class="list flex_row">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj1.png"></image></view>
					<text>我的相册</text>
				</view>
				<view class="right flex_row">
					<view :class="{color_gray:msg.my_photo_num==0}" class="text">{{msg.my_photo_num}}</view>
					<view class="right_icon flex_col">
						<image src="../../static/image/right_icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="list flex_row">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj2.png"></image></view>
					<text>我的昵称</text>
				</view>
				<view class="right flex_row">
					<view class="text">
						<input @input="bindName" maxlength="16" type="text" name="userName" :value="msg.nickname" placeholder-class="pla" placeholder="请填写"/>
					</view>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="list flex_row">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj3.png"></image></view>
					<text>我的年龄</text>
				</view>
				<view class="right flex_row">
					<view class="text">
						<input @blur="ageblur" @focus="agefocus" @input="bindAge" maxlength="2" type="number" name="userAge" :value="msg.age" placeholder-class="pla" placeholder="请填写"/>
					</view>
					<view class="right_icon"></view>
				</view>
			</view>
			<view @tap="bindAddress" class="list flex_row" hover-class="bindhover">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj4.png"></image></view>
					<text>现居地址</text>
				</view>
				<view class="right flex_row">
					<view v-if="msg.room_address==''" class="text color_gray">请选择</view>
					<view v-else class="text">{{msg.room_address}}</view>
					<view class="right_icon flex_col">
						<image src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</view>
			<view class="list flex_row h-m-t">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj5.png"></image></view>
					<text>身高(cm)</text>
				</view>
				<view class="right flex_row">
					<view class="text">
						<input @blur="heightblur" @focus="heightfocus" @input="bindHeight" maxlength="5" type="digit" name="userHeight" :value="msg.height" placeholder-class="pla" placeholder="请填写"/>
					</view>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="list flex_row">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj6.png"></image></view>
					<text>体重(kg)</text>
				</view>
				<view class="right flex_row">
					<view class="text">
						<input @blur="weightblur" @focus="weightfocus" @input="bindWeight" maxlength="5" type="digit" name="userWeight" :value="msg.weight" placeholder-class="pla" placeholder="请填写"/>
					</view>
					<view class="right_icon"></view>
				</view>
			</view> 
			<button hover-class="bindhover" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="list flex_row">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj7.png"></image></view>
					<text>手机认证</text>
				</view>
				<view class="right flex_row">
					<view v-if="msg.user_phone==''" class="text color_gray">未认证</view>
					<view v-else class="text">已认证</view>
					<view class="right_icon flex_col">
						<image src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</button>
			<view hover-class="bindhover" @tap="bindAsk" class="list flex_row h-m-t">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj8.png"></image></view>
					<text>对Ta的要求</text>
				</view>
				<view class="right flex_row">
					<view v-if="msg.other_ask==''" class="text color_gray">请选择</view>
					<view v-else class="text">{{msg.other_ask}}</view>
					<view class="right_icon flex_col">
						<image src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</view>
			<view hover-class="bindhover" @tap="bindLove" class="list flex_row">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj9.png"></image></view>
					<text>情感状况</text>
				</view>
				<view class="right flex_row">
					<view v-if="msg.emotional_state==''" class="text color_gray">请选择</view>
					<view v-else class="text">{{msg.emotional_state}}</view>
					<view class="right_icon flex_col">
						<image src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</view>
			<view hover-class="bindhover" @tap="bindMake" class="list flex_row">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj10.png"></image></view>
					<text>交友宣言</text>
				</view>
				<view class="right flex_row">
					<view v-if="msg.make_friends_dec==''" class="text color_gray">请选择</view>
					<view v-else class="text">{{msg.make_friends_dec}}</view>
					<view class="right_icon flex_col">
						<image src="../../static/image/right_icon.png"></image>
					</view>
				</view>
			</view>
			<view class="signCont list h-m-t">
				<view class="left flex_row">
					<view class="icon"><image src="../../static/image/bj11.png"></image></view>
					<text>个性签名</text>
				</view>
				<view class="sign">
					<textarea @input="bindSign" maxlength="50" cursor-spacing ="20" adjust-position="true" name="userSign" :value="msg.profile" placeholder-class="pla" placeholder="有个性的签名,更引人注目噢~"></textarea>
				</view>
			</view>
			<button form-type="submit" class="submit">提交资料</button>
		</form>
	</view>
</template>

<script>
	import headTitle from "../../components/headTitle.vue";
	import common from "../../common/network.js";
	var session = '',beforeMsg = '';
	export default {
		components:{headTitle},
		data(){
			return{
				msg:'',
				mask:false,$type:'',
				selectList:[],
			}
		},
		onLoad:function(options){
			var that = this;
			if(options.session!=undefined){
				session = options.session;
				that.getMsg();
			}
		},
		onShow:function(){
			var msg = this.msg;
			if(msg!=''){
				console.log('onshow')
				var $data = {
					'type':'zupinfo_res_userinfo',
					'session':session
				};
				common.network.request($data,function(res){
					console.log(res)
					if(msg.my_photo_num!=res.my_photo_num){
						msg.my_photo_num = res.my_photo_num;
					}
				})
			}
		},
		methods:{
			getMsg:function(){
				var that = this;
				var $data = {
					'type':'zupinfo_res_userinfo',
					'session':session
				};
				common.network.request($data,function(res){
					console.log(res)
					that.msg = res;
				})
			},
			// 背景墙
			bindwall:function(){
				uni.navigateTo({
					url:"/pagesA/backgroundImg/backgroundImg?session="+session
				})
			},
			// 我的相册
			bindPhoto:function(){
				uni.navigateTo({
					url:"/pagesA/photo/photo?session="+session
				})
			},
			//我的昵称
			bindName:function(e){
				var txt = e.detail.value;
				this.msg.nickname = txt;
			},
			//我的年龄
			bindAge:function(e){
				var txt = e.detail.value;
				this.msg.age = txt;
			},
			agefocus:function(){
				if(this.msg.age==0){
					this.msg.age = '';
				}
			},
			ageblur:function(){
				if(this.msg.age==''){
					this.msg.age = 0;
				}
			},
			//我的身高
			bindHeight:function(e){
				var txt = e.detail.value;
				this.msg.height = txt;
			},
			heightfocus:function(){
				if(this.msg.height==0){
					this.msg.height = '';
				}
			},
			heightblur:function(){
				if(this.msg.height==''){
					this.msg.height = 0;
				}
			},
			//我的体重
			bindWeight:function(e){
				var txt = e.detail.value;
				this.msg.weight = txt;
			},
			weightfocus:function(){
				if(this.msg.weight==0){
					this.msg.weight = '';
				}
			},
			weightblur:function(){
				if(this.msg.weight==''){
					this.msg.weight = 0;
				}
			},
			//我的签名
			bindSign:function(e){
				var txt = e.detail.value;
				this.msg.profile = txt;
			},
			// 现居地址
			bindAddress:function(){
				var that = this;
				uni.chooseLocation({
					success:function(res){
						var name = res.name;
						var msg = that.msg;
						msg.room_address = name;
					}
				})
			},
			//获取手机号
			getphonenumber:function(res){
				console.log(this.msg);
				var that = this;
				if(res.detail.encryptedData!=undefined){
					var $data = {
						'type':'zupinfo_get_phone',
						'session':session,
						'encryptedData':res.detail.encryptedData,
						'iv':res.detail.iv,
					};
					common.network.request($data,function(res){
						(that.msg).user_phone = res.purePhoneNumber;
					})
				}
			},
			//对Ta的要求
			offmask:function(){
				this.mask = false;
			},
			bindAsk:function(){
				this.$type = 1;
				this.mask = true;
				this.selectList = ['甜美可爱','温柔体贴','幽默风趣','成熟稳重','勤俭持家','忠厚老实'];
			},
			bindLove:function(){
				this.$type = 2;
				this.mask = true;
				this.selectList = ['单身','恋爱中','已婚','离异'];
			},
			bindMake:function(){
				this.$type = 3;
				this.mask = true;
				this.selectList = ['结交知己玩伴','找寻恋爱对象','以结婚为目的'];
			},
			select:function(res){
				var $type = this.$type;
				this.mask = false;
				var msg = this.msg;
				switch($type){
					case 1:msg.other_ask = res;break;
					case 2:msg.emotional_state = res;break;
					case 3:msg.make_friends_dec = res;break;
				}
			},
			bindSubmit:function(res){
				console.log(res.detail);
				var $object = res.detail.value;
				var msg = this.msg;
				msg.age = $object.userAge;
				msg.nickname = $object.userName;
				msg.weight = $object.userWeight;
				msg.height = $object.userHeight;
				msg.profile = $object.userSign;
				console.log(msg)
				if(getByteLen(msg.nickname)>16){
					model('您的昵称不能超过8个字');
				}else if(msg.my_photo_num == 0){
					model('请上传您的相册照片');
					return false;
				}else if((msg.nickname).replace(/(^\s*)|(\s*$)/g,"") == ""){
					model('请填写您的昵称');
					return false;
				}else{
					var msgData = {
						'type':'zupinfo_ins_userinfo',
						'session':session,
						'nickname':msg.nickname,
						'age':msg.age,
						'room_address':msg.room_address,
						'height':msg.height,
						'weight':msg.weight,
						'other_ask':msg.other_ask,
						'emotional_state':msg.emotional_state,
						'make_friends_dec':msg.make_friends_dec,
						'profile':msg.profile,
						'user_phone':msg.user_phone,
					}
					common.network.request(msgData,function(res){
						console.log(res);
						uni.showToast({
							icon:'success',
							title:'提交成功',
							success:function(){
								setTimeout(function(){
									uni.navigateBack({})
								},2000)
							}
						})
					})
				}
				function model(txt){
					uni.showModal({
						content:txt,
						showCancel:false,
						confirmText:'知道了',
						confirmColor:'#6278FF',
					})
				}
				function getByteLen(val) {
					var len = 0;
					for (var i = 0; i < val.length; i++) {
						var a = val.charAt(i);
						if (a.match(/[^\x00-\xff]/ig) != null) {
							len += 2;
						}
						else {
							len += 1;
						}
					}
					return len;
				}
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		background: #F5F5F5;
		padding-bottom: 60px;
	}
	.bindhover{
		background: #f8f8f8;
	}
	.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		z-index: 4;
	}
	.selectCont{
		width: 74%;
		background: #fff;
		border-radius: 16px;
		position: absolute;
		top: 24%;
		left: 13%;
		z-index: 1000;
	}
	.delIcon{
		width: 64px;
		height: 64px;
		position: absolute;
		top: -80px;
		right: -10px;
	}
	.selectCont .select{
		padding: 26px 0;
		border-bottom: 1px solid #F1F1F1;
		text-align: center;
	}
	.selectCont .select:first-of-type{
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
	}
	.selectCont .select:last-of-type{
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		border-bottom: none;
	}
	.h-m-t{
		margin-top: 18px;
	}
	.wrapper .list{
		border-bottom: 1px solid #F5F5F5;
		justify-content: space-between;
		padding: 0 26px;
		background: #fff;
	}
	button.list{
		font-size: 30px;
		padding: 0 26px;
		margin: 0;
		
		border-radius: 0;
	}
	button.list .icon{
		position: relative;
		top: -6px;
	}
	button.list .right{
		font-size: 28px;
	}
	.right{
		width: 460px;
		height: 100px;
		justify-content: flex-end;
	}
	.text{
		width: 410px;
		padding-right: 10px;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28px;
	}
	.right_icon{
		width: 22px;
		height: 100px;
		justify-content: center;
	}
	.right_icon image{
		width: 22px;
		height: 22px;
	}
	.text input{
		width: 100%;
		border: none;
		padding: 0;
		margin: 0;
	}
	.icon{
		width: 42px;
		height: 42px;
		margin-right: 20px;
	}
	.icon image{
		width: 100%;
		height: 100%;
	}
	.color_gray{
		color: #C3C3C3;
	}
	.wrapper .signCont{
		padding-top: 32px;
	}
	.sign{
		height: 130px;
		padding: 20px 30px;
	}
	.sign textarea{
		font-size: 28px;
		height: 100%;
		line-height: 44px;
		word-break: break-all;
		text-align: justify;
		width: 100%;
	}
	button.submit{
		background: linear-gradient(to right,#AE33F6,#6673FF);
		line-height: 2.7;
		width: 80%;
		color: #fff;
		font-size: 34px;
		border-radius: 100px;
		margin: auto;
		margin-top: 60px;
	}
	button.submit:active{
		background: linear-gradient(to right,#6673FF,#AE33F6);
	}
</style>
